<template>
	<uni-search-bar :focus="focus" class="search-bar" bgColor="#f6f6f6" placeholder="搜索一下，发现更多内容" clearButton="always" cancelButton="none" @confirm="search" @focus="onfocus">
		<image class="search-icon" slot="searchIcon" src="../static/images/icon_search@3x.png">
		<image class="clear-icon" slot="clearIcon" src="../static/images/icon_close@3x.png">
	</uni-search-bar>
</template>

<script>
	export default {
		props:{
			focus:{
				type:Boolean,
				default:false
			}
		},
		methods: {
			search: function(e){
				this.$emit('confirm', e);
			},
			onfocus:function(e){
				this.$emit("focus",e)
			}
		},
		
	}
</script>

<style>

	.search-bar {
		width: 110rpx;
	}
	
	.search-icon{
		width: 32rpx;
		height: 32rpx;
	}
	.clear-icon{
		width: 24rpx;
		height: 24rpx;
	}
</style>
